<template>
  <Dialog title="预览" v-model="dialogVisible" width="1000" class="call-see-dialog">
    <div class="dialog-content">
      <!-- 头部区域 -->
      <div class="dialog-header">
        <div class="header-icon">
          <Icon icon="ep:view" />
        </div>
        <div class="header-content">
          <h3 class="dialog-title">名单预览</h3>
          <p class="dialog-subtitle">查看呼叫名单详细内容</p>
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table :data="list" class="enhanced-table">
          <el-table-column
            prop="number"
            label="号码"
            align="center"
            min-width="120"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div class="phone-cell">
                <Icon icon="ep:phone" class="phone-icon" />
                <span class="phone-text">{{ scope.row.number }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            :formatter="dateFormatter"
            label="创建时间"
            align="center"
            width="180"
          />

          <el-table-column
            v-for="item in keyList"
            :key="item.id"
            :label="item.extendName"
            :prop="item.extendCode"
            align="center"
            min-width="100"
          />

          <el-table-column prop="prop" label="操作" align="center" width="80" fixed="right">
            <template #default="scope">
              <el-button type="danger" @click="handleDelete(scope.row.id)" link class="delete-btn">
                <Icon icon="ep:delete" class="btn-icon" />
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import CallListForm from './callListForm.vue'
import { RecordApi } from '@/api/call/record'
import { dateFormatter } from '@/utils/formatTime'

const message = useMessage()
const { t } = useI18n()
const dialogVisible = ref(false)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  listId: null
})
const total = ref(0)
const list = ref([])
const open = (id) => {
  dialogVisible.value = true
  queryParams.listId = id
  queryParams.pageNo = 1
  getList()
  getFiled()
}
// 列表
const getList = async () => {
  const data = await RecordApi.getTaskCalleelistPage(queryParams)
  const flattenedData = data.list.map((item) => {
    const { extendMap, ...rest } = item
    return { ...rest, ...extendMap }
  })
  list.value = flattenedData
  total.value = data.total
}
const keyList = ref([])
// 自定义字段
const getFiled = async () => {
  const data = await RecordApi.taskCalleeListNumberRule()
  keyList.value = data
}
defineExpose({ open })

/*删除*/
const handleDelete = async (id) => {
  try {
    await message.delConfirm()
    await RecordApi.deleteTaskCallelist(id)
    ElMessage.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
</script>

<style lang="scss" scoped>
.call-see-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
  }
}

.dialog-content {
  background: #f8fafc;
}

/* 对话框头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;

  @media (max-width: 768px) {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.dialog-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 表格容器 */
.table-container {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
    overflow-x: auto;
  }
}

.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
  }
}

.phone-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.phone-icon {
  color: #0052cc;
  font-size: 16px;
  flex-shrink: 0;
}

.phone-text {
  color: #1f2937;
  font-weight: 500;
  font-family: 'Monaco', 'Menlo', monospace;
}

.delete-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(245, 108, 108, 0.1);
  }

  .btn-icon {
    font-size: 12px;
  }
}

.pagination-wrapper {
  padding: 20px 0;
  display: flex;
  justify-content: center;

  :deep(.el-pagination) {
    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .table-container {
    background: #374151;
  }

  .dialog-title {
    color: #f9fafb;
  }

  .phone-text {
    color: #f9fafb;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }
}
</style>
